<template>
  <div id="GJmarket">
    <NavBar
      title="合约交易"
      class="flexd"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="jiaoyi-title-box">
      <div class="jiaoyi-title-fl green">
        <h1 class="jiaoyi-title-sm">
          <span class="jiaoyi-top-fl-btn"
            >BTC<span class="jiaoyi-top-fl-small">/USDT</span></span
          >169.32
        </h1>
        <p class="jiaoyi-title-xs">
          <span style="padding-right: 10px;">6.67</span><span>4.10%</span>
        </p>
      </div>
      <div class="head__btn">持仓</div>
    </div>
    <div class="jiaoyi-title-box">
      <div class="jiaoyi-title-fl">
        <tabs class="tabBox" v-model="active">
          <tab
            :title="item"
            :name="index"
            v-for="(item, index) in tabItem"
            :key="item"
            :text="item"
          />
        </tabs>
        <div class="content__row">交易方向</div>
        <div class="content__row--center" style="padding-bottom: 0px;">
          <div
            :class="direction == 0 ? 'btn active_red' : 'btn'"
            @click="clickDirection(0)"
          >
            买空
          </div>
          <div
            :class="direction == 1 ? 'btn active_green' : 'btn'"
            @click="clickDirection(1)"
          >
            买多
          </div>
        </div>
        <template v-if="active == 1">
          <div class="content__row">委托价格</div>
          <Field v-model="number" type="number" placeholder="请输入委托价格" />
          <div class="solid"></div>
        </template>

        <div class="content__row">交易手数</div>
        <div class="content__grid">
          <div
            :class="lot == item ? 'content__cell active' : 'content__cell'"
            v-for="item in lotTab"
            :key="item"
            @click="clickLot(item)"
          >
            {{ item }}
          </div>
        </div>
        <Stepper v-model="lot" input-width="70px" button-size="35px" />

        <div class="solid"></div>
        <div class="content__row">
          <div class="content__col">
            <div class="content__tips">
              <div>占用保证金:</div>
              <div>17.104</div>
            </div>
            <div class="content__tips">
              <div>手续费:</div>
              <div>0.01</div>
            </div>
            <div class="content__tips">
              <div>可用余额:</div>
              <div>1151.94</div>
            </div>
            <div class="content__grid"></div>
          </div>
        </div>
        <div class="content__row">
          <div class="content__label">杠杆倍数</div>
          <div class="content__col">
            <div class="content__btn">{{ leverage }}</div>
          </div>
        </div>
        <div class="content__grid">
          <div
            :class="leverage == item ? 'content__cell active' : 'content__cell'"
            v-for="item in leverageTab"
            :key="item"
            @click="clickLeverage(item)"
          >
            {{ item }}
          </div>
        </div>
        <div class="solid"></div>

        <div class="content__row">
          <div class="content__label">止损价</div>
          <Stepper v-model="stopLoss" input-width="70px" button-size="35px" />
        </div>
        <div class="content__row">
          <div class="content__label">止盈价</div>
          <Stepper v-model="surplus" input-width="70px" button-size="35px" />
        </div>
      </div>
      <div class="jiaoyi-title-fr">
        <div class="MarketGear-box">
          <div class="shuju-list-l">
            <span class="MarketGear-list-l-right">价格(USDT)</span
            ><span class="MarketGear-list-l-right">数量(BTC)</span>
          </div>
          <ul class="shuju-list">
            <li
              class="shuju-list-l"
              v-for="(item, index) in datas"
              :key="index"
            >
              <template v-if="index < 10 && item">
                <span class="MarketGear-list-l-right  green">{{
                  item.price
                }}</span
                ><span class="MarketGear-list-1-right">{{
                  item.amount.toFixed(6)
                }}</span>
              </template>
            </li>
          </ul>
        </div>
        <div class="MarketGear-box">
          <div style="width: 200px; height: 1px;"></div>
          <ul class="shuju-list">
            <li
              class="shuju-list-l"
              v-for="(item, index) in datas"
              :key="index"
            >
              <template v-if="index > 9 && item">
                <span class="MarketGear-list-l-right red ">{{
                  item.price
                }}</span
                ><span class="MarketGear-list-1-right">{{
                  item.amount.toFixed(6)
                }}</span>
              </template>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="datasBox">
      <div class="actvie">持仓</div>
      <div>已成交</div>
      <div>平仓</div>
    </div>
    <div class="datas">
      <div class="nav">
        <div>产品</div>
        <div>波动盈亏</div>
        <div>成交价</div>
        <div>方向</div>
        <div>交易手数</div>
      </div>
      <div class="nav" v-for="item in 10" :key="item">
        <div>LTC/USDT</div>
        <div></div>
        <div>171.09</div>
        <div class="green">买多</div>
        <div>1</div>
      </div>
    </div>
    <div class="bottomBtn">
      <div :class="direction == 0 ? 'active_red' : 'active_green'">
        {{ direction == 0 ? '买空' : '买多' }}
      </div>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, NavBar, Stepper, Field } from 'vant'

import { EventBus } from '@/utils/event-bus'

export default {
  components: {
    Tab,
    Tabs,
    NavBar,
    Stepper,
    Field
  },
  data() {
    return {
      datas: [], //  实时数据
      tabItem: ['市价委托', '限价委托'],
      lotTab: [1, 5, 10, 20], //  交易手数tab
      leverageTab: [20, 15, 10], //  杠杆倍数Tab
      active: 0, //  tab数值
      direction: 0, //  交易方向 0买空 1买多
      number: null, //  委托价
      lot: 0, //  交易手数
      leverage: 10, //  杠杆倍数
      stopLoss: 0, //  止损价
      surplus: 0 //  止盈价
    }
  },
  created() {
    let Interval = setInterval(() => {
			if (this.$store.state.websocket.is_open_socket) {
				this.send()
				// 已连接移除定时器
				clearInterval(Interval);
			}
		}, 500);
  },
  methods: {
    // 解决直接后退页面symbol被转译问题
    onClickLeft() {
      this.$router.push({
        path: '/market',
        query: { symbol: this.$route.query.symbol }
      })
    },
    //  切换交易方向
    clickDirection(index) {
      this.direction = index
    },
    //  选择交易手数Tab
    clickLot(item) {
      this.lot = item
    },
    //  选择杠杆倍数
    clickLeverage(item) {
      this.leverage = item
    },
    //  实时数据订阅
    send() {
      let ch = `market.${
        JSON.parse(localStorage.getItem('symbol')).symbol
      }.trade.detail`
      EventBus.$on(ch, res => {
        let newRes = res.data.tick.data.concat(this.datas)
        this.datas = newRes
        this.datas.length = 20
        console.log(this.datas)
      })
    }
  }
}
</script>

<style lang="less" scoped>
#GJmarket {
  width: 100vw;
  padding: 46px 0 60px;
  overflow: hidden;
  background-color: #131c2e;
  min-height: 100vh;
  .flexd {
    width: 100%;
    position: fixed;
    top: 0;
  }
  .jiaoyi-title-box {
    display: flex;
    justify-content: space-between;
    background: #fff;
    font-size: 12px;
    color: #fff;
    padding: 10px;
    margin: 0 1px 1px 1px;
    background-color: #131c2e;
    .jiaoyi-title-fl {
      width: 60%;
      padding: 0 5px;
      .jiaoyi-title-sm {
        margin: 10px auto;
        font-size: 24px;
        font-weight: 700;
        .jiaoyi-top-fl-btn {
          padding: 0 4px;
          background: none;
          border: none;
          color: #fff;
          .jiaoyi-top-fl-small {
            font-size: 11px;
            color: #777;
          }
        }
      }
      .jiaoyi-title-xs {
        font-size: 14px;
        font-weight: 600;
      }
    }
    .head__btn {
      background: #3c475c;
      color: #fff;
      text-align: center;
      padding: 6px 10px;
      height: 17px;
      margin-top: 22px;
    }
    .green {
      color: #1cad90;
    }
    /deep/.van-tabs__nav {
      position: relative;
      background-color: #131c2e;
      .van-tab--active {
        color: #fff;
      }
      .van-tabs__line {
        width: 20px;
        height: 3px;
        background-color: #fff;
        bottom: 22px;
      }
    }
    .content__row {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #333;
    }
    .content__row--center {
      display: flex;
      align-items: center;
      padding: 10px 0;
      .btn {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        line-height: 32px;
        color: #fff;
        border-color: #c8c7cc;
        border: 0.5px solid #c8c7cc;
        border-radius: 200px;
        width: 50%;
      }
    }
    .content__grid {
      display: flex;
      justify-content: space-between;
      margin: 5px 0;
      .content__cell {
        flex: auto;
        border-radius: 5px;
        border: 0.5px solid #293047;
        text-align: center;
        font-weight: 700;
        line-height: 32px;
        margin-right: 10px;
      }
      .content__cell:last-child {
        margin-right: 0;
      }
    }
    .content__cell.active {
      color: #fff;
      background: #293047;
    }
    /deep/.van-stepper__minus,
    /deep/.van-stepper__plus,
    /deep/.van-stepper__input {
      color: #fff;
      background: #293047;
    }
    .content__col {
      flex: auto;
      display: flex;
      flex-direction: column;
      .content__tips {
        text-align: left;
        margin-right: 10px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        align-items: center;
      }
    }
    .content__btn {
      margin-left: 15px;
      color: #fff;
      border-radius: 3px;
      text-align: center;
      line-height: 30px;
      background: #293047;
    }
  }
  .jiaoyi-title-fr {
    width: 40%;
    padding: 0 5px;
    .shuju-list-l {
      display: flex;
      justify-content: space-between;
       span{
        margin: 6px 0;
      }
    }
  }
  .solid {
    margin-top: 5px;
    width: 100%;
    height: 1px;
    background-color: #293047;
  }

  .datasBox {
    display: flex;
    justify-content: space-between;
    color: #777;
    text-align: center;
    border-bottom: 1px solid #fff;
    div {
      width: 33.3%;
      padding: 10px 0;
    }
    .actvie {
      color: #588bf7;
    }
  }
  .datas {
    .nav {
      display: flex;
      color: #fff;
      text-align: center;
      justify-content: space-between;
      padding: 10px 20px;
      div {
        width: 16.66%;
      }
    }
  }
  .bottomBtn {
    width: 100vw;
    height: 59px;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    div {
      width: 80%;
      line-height: 38px;
      padding: 0 5px;
      font-size: 14px;
      color: #fff;
      border-radius: 500px;
      text-align: center;
    }
  }
  .active_green {
    color: #fff;
    background: #1cad90;
  }
  .active_red {
    color: #fff;
    background: #cd4e65;
  }
  .van-cell {
    border-radius: 10px;
    height: 38px;
    align-items: center;
    margin: 10px 0;
  }
}
</style>
